<template>
  <div>
    <template v-if="dictName">
      <span :key="code">{{ dictName }}</span>
    </template>
    <template v-else>{{ value }}</template>
  </div>
</template>

<script setup>
import { getDict } from '@/api/system/dict'

const props = defineProps({
  options: {
    type: Array,
    default: null,
  },
  value: [Number, String, Array],
  code: [Number, String]
})

const allOption = ref(null)
const dictName = ref('')
watch(() => props.value, async () => {
  if (!props.options && props.code) {
    let res = await getDict(props.code)
    allOption.value = res.data
  } else {
    allOption.value = props.options
  }
  dictName.value = allOption.value.find(item => item.dictItemCode == props.value)?.dictItemName
}, { immediate: true, deep: true })

</script>

<style scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}
</style>